<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="/js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="/easyUI/1.5.5.4/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/easyUI/1.5.5.4/locale/easyui-lang-zh_CN.js"></script>
    <script src="https://code.highcharts.com/highcharts.src.js"></script>
    <script type="text/javascript" src="/easyUI/1.5.5.4/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/easyUI/1.5.5.4/locale/easyui-lang-zh_CN.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/wu.css" />
    <link rel="stylesheet" type="text/css" href="/css/icon.css" />
    <link rel="stylesheet" type="text/css" href="/easyUI/1.5.5.4/themes/bootstrap/easyui.css" />

    <title>Title</title>
</head>
<body>
    <div id="container" style="min-width:400px;height:400px"></div>
    <a >----------------己方英雄属性------------------------</a></br>
    <a id="atk"></a>
    <a id="hp"></a>
    <input type="text" id="typeId"/>
    <button id="_btn" onclick="print()">2333</button>
    <script>
        var count = 0;
        var objects = new Array();
        var arrIsCrit = new Array();
        var totalDamage = 0;
        var pointData = new Array();
        var index = 0;
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });
        function activeLastPointToolip(chart) {
            var points = chart.series[0].points;
            chart.tooltip.refresh(points[points.length-1]);
        }
        var chart = Highcharts.chart('container', {
            chart: {
                type: 'spline',
                marginRight: 10,
                events: {
                    load: function () {
                        var series = this.series[0],
                            chart = this;
                        setInterval(function () {
                           var datas  =  getData();
                           if(datas == null || datas.length<1){
                               return;
                           }
                           $.each(datas,function(index,value){
                               arrIsCrit[count] = value.isCrit
                               var x = count;
                               var y = Math.floor(value.damageNumber);
                               totalDamage+= parseInt(y);
                               $("#atk").text("攻击力:"+value.atk);
                               $("#hp").text("血量:"+value.hp);
                               pointData.push (x);
                               pointData.push (y);
                               objects.push({
                                   isCrit:value.isCrit,
                                   atk:value.atk,
                                   hp:value.hp,
                                   x:x,
                                   y:y
                               })
                               series.addPoint([++count,y], true, true);
                               activeLastPointToolip(chart);
                           })
                            var title = {
                                text:"总伤害:"+ totalDamage
                            };
                            chart.setTitle(title);
                        }, 1000);
                    }
                }
            },
            title: {
                text: '伤害监控'
            },
            xAxis: {
                tickPixelInterval: 50
            },
            yAxis: {
                title: {
                    text: null
                },
                minorTickLength: 10
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>第'+ this.x + '次<br/>伤害:'+ this.y+"-->"+(objects.length>0?objects[this.x-1].isCrit:0);
                }
            },
            legend: {
                enabled: false
            },
            series: [{
                name: '伤害监控',
                data: (function () {
                    // 生成随机值
                    var data = [];
                    for (i = 0;i<= 999;i += 1) {
                        data.push({
                            x:0,
                            y: 0
                        });
                    }
                    return data;
                }())
            }]
        });
        function getData(){
            var result  = requestFormAjax("http://localhost:8080/getDamegeData",false);
            return result;
        }
        function print(){
            var arr =  new Array();
            var typeId =  $("#typeId").val()
            if(typeId.length <=0){
                alert("请输入typeId");
                return;
            }
            for(var i = 0,i1=0;i<pointData.length;i+=2,i1++){
                var obj = new Object()
                obj.pointX = pointData[i];
                obj.isCrit = arrIsCrit[i1];
                obj.pointY = pointData[i+1];
                obj.typeId = typeId;
                arr.push(obj);
            }


            requestFormAjax("http://localhost:8080/updateData",false,JSON.stringify(arr));
        }
        //页面加载完后,在加载js
        $(function (){

        });
      function requestFormAjax(url,async,data){
          var result;
          $.ajax({
              url:url,
              type:"post",
              data:data,
              async:async,
              contentType: "application/json",
              success:function(data){
                  if( data != null && data != ""){
                      result =  eval('(' + data + ')');
                  }
              }
          })
          return result;
      }
    </script>
</body>
</html>